<template>
	<gracePage headerBG="#FFFFFF">
		<view class="grace-header-body" slot="gHeader">
			<text class="iconfont icon-qiandao grace-header-icons" @click.stop="goback"></text>
			<graceNavBar
				class="nav-bar grace-flex1"
				:items="tabs"
				activeLineRadius="20rpx"
				activeDirection="center"
				textAlign="center"
				color="#969696"
				lineHeight="40rpx"
				:isCenter="true"
				:size="100"
				activeLineWidth="70rpx"
				activeLineHeight="10rpx"
				activeLineBg="#FEDE33"
				:currentIndex="currentIndex"
				@change="navChange"
			></graceNavBar>
			<text class="iconfont icon-bianji1 grace-header-icons" @click.stop="goToPublish"></text>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-flex-v1" id="gBody">
			<swiper :style="{ height: mainHeight + 'px' }" :current="currentIndex" @change="swiperChange">
				<swiper-item>
					<scroll-view scroll-y :style="{ height: mainHeight + 'px' }" @scrolltolower="scrollend">
						<view class="empty-view grace-flex-center  grace-flex-vcenter grace-animate fadeIn" v-if="newsList.length === 0">
							<image class="empty-img" mode="widthFix" src="../../static/image/nothing.png"></image>
						</view>
						<block v-for="(item, index) in newsList" :key="index"><news-list :item="item"></news-list></block>
						<graceLoading :loadingType="loadingType"></graceLoading>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y :style="{ height: mainHeight + 'px' }">
						<!-- 搜索框 -->
						<view class="search-input"><input class="input" placeholder-class="iconfont icon-sousuo grace-flex-center" placeholder="搜索内容" /></view>
						<!-- 轮播图 -->
						<graceSwiperCard 
							:swiperItems="topic.banner" 
							spacing="0rpx" 
							padding="0 20rpx" 
							borderRadius="10rpx" 
							indicatorActiveColor="#FEE42A" 
							:scale="false">
						</graceSwiperCard>
						<!-- 分类 -->
						<view class="topic-type grace-border-b grace-border-t">
							<view class="grace-space-between grace-flex-vcenter">
								<text class="grace-h4 grace-black">热门分类</text>
								<view class="grace-gray grace-flex grace-flex-vcenter grace-h5" @click="goToTopicType">
									<text>更多</text>
									<text class="iconfont icon-jinru"></text>
								</view>
							</view>
							<view class="grace-margin-top grace-flex-center grace-flex-vcenter">
								<block v-for="(type, index) in topic.types" :key="index">
									<view class="type grace-flex1 grace-flex-center grace-flex-vcenter">{{ type }}</view>
								</block>
							</view>
						</view>
						<!-- 最近更新 -->
						<view class="topic-update">
							<view class="grace-black grace-h4">最近更新</view>
							<block v-for="(item, index) in topic.list" :key="index"><topic-list :item="item"></topic-list></block>
						</view>
						<!-- <graceLoading :loadingType="loadingType"></graceLoading> -->
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</gracePage>
</template>

<script>
var graceJS = require('@/Grace.JS/grace.js');
import NewsList from '../../components/news-list/news-list';
import TopicList from '../../components/topic-list/topic-list';
export default {
	data() {
		return {
			currentIndex: 0,
			mainHeight: 600,
			tabs: ['关注', '话题'],
			// 加载状态
			loadingType: 3,
			topic: {
				types: ['最新', '游戏', '情感', '打卡', '故事', '喜爱'],
				banner: [
					{
						img: '../../static/demo/banner2.jpg',
						url: '',
						opentype: 'navigate'
					},
					{
						img: '../../static/demo/banner2.jpg',
						url: '',
						opentype: 'navigate'
					},
					{
						img: '../../static/demo/banner2.jpg',
						url: '',
						opentype: 'navigate'
					}
				],
				list: [
					{
						title: '淘宝记录簿',
						pic: '../../static/demo/topicpic/13.jpeg',
						desc: '120斤到85斤 我的反转人生',
						totalNum: 545,
						todayNum: 720
					},
					{
						title: '你亲身经历的灵异事件',
						pic: '../../static/demo/topicpic/14.jpeg',
						desc: '走出去，才发现你跟别人差的不是一点半点',
						totalNum: 545,
						todayNum: 720
					},
					{
						title: '天天大卡',
						pic: '../../static/demo/topicpic/9.jpeg',
						desc: '面试官：在电梯里巧遇马云你会做什么？90后女孩的回答当场被录用',
						totalNum: 545,
						todayNum: 720
					}
				]
			},
			newData: [
				{
					userAvatar: '../../static/demo/userpic/8.jpg',
					username: '涛哥哥',
					sex: 0, //0 男 1女
					age: 25,
					isFollow: false,
					title: '我是标题啦啦啦啦',
					video: false, //video
					share: false,
					address: '深圳 龙岗',
					pic: '',
					playNum: '20w',
					duration: '2:47',
					likeNum: 11,
					commentNum: 10,
					shareNum: 10
				},
				{
					userAvatar: '../../static/demo/userpic/8.jpg',
					username: '涛哥哥',
					sex: 0, //0 男 1女
					age: 25,
					isFollow: false,
					title: '我是标题啦啦啦啦',
					video: false, //video
					share: false,
					address: '深圳 龙岗',
					pic: '',
					playNum: '20w',
					duration: '2:47',
					likeNum: 11,
					commentNum: 10,
					shareNum: 10
				}
			],
			page: 1,
			newsList: [
				{
					userAvatar: '../../static/demo/userpic/8.jpg',
					username: '涛哥哥',
					sex: 0, //0 男 1女
					age: 25,
					isFollow: false,
					title: '我是标题啦啦啦啦',
					video: false, //video
					share: false,
					address: '深圳 龙岗',
					pic: '',
					playNum: '20w',
					duration: '2:47',
					likeNum: 11,
					commentNum: 10,
					shareNum: 10
				},
				{
					userAvatar: '../../static/demo/userpic/8.jpg',
					username: '涛哥哥',
					sex: 0, //0 男 1女
					age: 25,
					isFollow: false,
					title: '我是标题啦啦啦啦',
					video: false, //video
					share: false,
					address: '深圳 龙岗',
					pic: '../../static/demo/datapic/12.jpg',
					playNum: '20w',
					duration: '2:47',
					likeNum: 11,
					commentNum: 10,
					shareNum: 10
				},
				{
					userAvatar: '../../static/demo/userpic/10.jpg',
					username: '涛哥哥',
					sex: 1, //0 男 1女
					age: 33,
					isFollow: false,
					title: '我是标题啦啦啦啦',
					video: {
						playNum: '20w',
						duration: '2:47'
					}, //video
					share: false,
					address: '深圳 龙岗',
					pic: '../../static/demo/datapic/12.jpg',
					likeNum: 11,
					commentNum: 10,
					shareNum: 10
				},
				{
					userAvatar: '../../static/demo/userpic/10.jpg',
					username: '涛哥哥',
					sex: 1, //0 男 1女
					age: 28,
					isFollow: false,
					title: '我是标题啦啦啦啦',
					video: false, //video
					share: {
						title: '分享分享',
						pic: '../../static/demo/datapic/1.jpg'
					},
					address: '深圳 龙岗',
					pic: '',
					playNum: '20w',
					duration: '2:47',
					likeNum: 11,
					commentNum: 10,
					shareNum: 10
				}
			]
		};
	},
	onReady() {
		graceJS.select('#gBody',(res)=>{
			this.mainHeight = res.height
		});
	},
	methods: {
		goToPublish() {
			graceJS.navigate('../publish/publish');
		},
		navChange(index) {
			this.currentIndex = index;
		},
		swiperChange(e) {
			let index = e.detail.current;
			this.currentIndex = index;
		},
		scrollend() {
			// 判断加载状态避免多次滚动时有加载尚未完成
			if (this.loadingType == 2 || this.loadingType == 4) {
				return false;
			}
			this.loadMoreFunc();
		},
		loadMoreFunc() {
			this.loadingType = 1;
			//追加数据(延迟1秒 模拟网络请求)
			setTimeout(() => {
				if (this.page > 3) {
					this.loadingType = 2;
					return;
				}

				this.newsList = this.newsList.concat(this.newData);

				// 页码增加
				this.page++;
				setTimeout(() => {
					this.loadingType = 3;
				}, 300);
			}, 1000);
		},
		inputting(e) {
			console.log(e);
		},
		confirm(e) {
			console.log(e);
		},
		goToTopicType(){
			graceJS.navigate('../topic-type/topic-type');
		}
	},
	components: {
		NewsList,
		TopicList
	}
};
</script>

<style lang="stylus">
.grace-header-icons
	font-size 24px
	&:first-child
		color #FF9619
.search-input
	padding 20rpx
	.input
		height 50rpx
		padding 15rpx 25rpx
		line-height 50rpx
		font-size 28rpx
		background #F4F4F4
		flex 1
		border-radius 10rpx
.topic-type
	margin-top 10rpx
	padding 30rpx 20rpx
	.type
		border-radius 10rpx
		padding 10rpx 20rpx
		background #F5F5F5
		color #9E9E9E
		margin 0 10rpx
.topic-update
	padding 30rpx 20rpx
</style>
